import React from 'react';
import {Route, Switch, NavLink, Redirect} from 'react-router-dom'
import { Layout, Menu } from 'antd';
import {
  ShareAltOutlined,
  DeleteOutlined,
  PoweroffOutlined,
  AppstoreOutlined
} from '@ant-design/icons';

import Files from './Files'
import Shares from './Shares'
import Recycle from './Recycle'
import Logout from './Logout'



import 'antd/dist/antd.css'
import style from './index.module.css'

const { Header, Content, Footer, Sider } = Layout;

export default class Home extends React.Component {
  state = {
    collapsed: false,
    userName: 'demo',
    userAvatar: 'https://tank.eyeblue.cn/static/media/logo.21458adb.png',
    logoUrl: 'https://tank.eyeblue.cn/static/media/logo.21458adb.png',
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    const { collapsed, userName, userAvatar, logoUrl } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className={style["logo"]}>
            <img src={userAvatar} alt="avatar" />
            <p>{userName}</p>
          </div>
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<AppstoreOutlined />}>
              <NavLink to="/home/files">全部文件</NavLink>
            </Menu.Item>
            <Menu.Item key="2" icon={<ShareAltOutlined />}>
              <NavLink to="/home/shares">我的分享</NavLink>
            </Menu.Item>
            <Menu.Item key="3" icon={<DeleteOutlined />}>
              <NavLink to="/home/recycle">回收站</NavLink>
            </Menu.Item>
            <Menu.Item key="4" icon={<PoweroffOutlined />}>
              <NavLink to="/home/logout">退出登录</NavLink>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className={style["site-layout"]}>
          <Header style={{ padding: 0, backgroundColor:'#ddd', height: '50px' }}>
            <div className={style["header-logo"]}>
              <img src={logoUrl} alt="" />
              <span>EyeBlueTank</span>
            </div>
          </Header>
          <Content style={{ margin: '0 16px' }}>
            <Switch>
              <Route path="/home/files" component={Files}/>
              <Route path="/home/shares" component={Shares}/>
              <Route path="/home/recycle" component={Recycle}/>
              <Route path="/home/logout" component={Logout}/>
              <Redirect to="/home/files" />
            </Switch>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}